<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title th:text="${title}+'-'+${@config.getKey('site.name')}"></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/css.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}"/>
    <link rel="stylesheet" th:href="@{/css/detail.css}"/>
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
</head>
<body onload="ResizeImages()">
<!-- 注册登录 -->
<div th:include="common/v2/head :: head"></div>

<!--内容详情-->
<div class="nrxq nav">

    <div class="pLeft">

        <div class="data_list">
            <div class="data_list_title">
                <i class="layui-icon layui-icon-app"></i>
                <span class="head">资源详情</span>
            </div>
            <div class="article">
                <div class="title" th:text="${article.articleName}"></div>
                <div class="info">
                    <a href="" target="_blank" th:text="${article.user.loginName}"></a>&nbsp;&nbsp;
                    分享于&nbsp;&nbsp;<font th:text="${#dates.format(article.articlePublishDate,'yyyy-MM-dd')}"></font>
                </div>
                <div align="center">
                    <div class="bshare-custom"><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博"
                                                                                              class="bshare-sinaminiblog"></a><a
                            title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a
                            title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台"
                                                                            class="bshare-more bshare-more-icon more-style-addthis"></a><span
                            class="BSHARE_COUNT bshare-share-count">0</span></div>
                    <script type="text/javascript" charset="utf-8"
                            src="https://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script>
                    <script type="text/javascript" charset="utf-8" src="https://static.bshare.cn/b/bshareC0.js"></script>
                </div>
                <div class="downloadBtn">
                    <button class="layui-btn layui-btn-radius" onclick="download()">&nbsp;&nbsp;立即下载&nbsp;&nbsp;
                    </button>
                    <button class="layui-btn layui-btn-radius" onclick="vipDownload()">
                        &nbsp;&nbsp;VIP免积分下载&nbsp;&nbsp;
                    </button>
                </div>

                <div id="content" class="content" th:utext="${article.articleContent}"></div>
            </div>
        </div>

        <div class="data_list" style="margin-top: 10px">
            <div class="data_list_title">
                <i class="layui-icon layui-icon-dialogue"></i>
                <span class="head">评论信息</span>&nbsp;&nbsp;<font style="color: #999;"
                                                                th:text="'共'+${commentCount}+'条'"></font>
            </div>
            <div id="userComment" class="userComment">
                <textarea id="commentContent" placeholder="请输入评论信息" class="layui-textarea"></textarea>
                <button style="background-color: rgb(0, 122, 255);" class="layui-btn layui-btn-radius  layui-btn-sm" onclick="submitData()">&nbsp;&nbsp;提交评论&nbsp;&nbsp;</button>
            </div>
            <div id="commentList" class="commentList"></div>
            <div id="articlePage" class="articlePage" th:if="${commentCount>0}"></div>
        </div>

        <div class="data_list" style="margin-top: 10px">
            <div class="data_list_title">
                <i class="layui-icon layui-icon-component"></i>
                <span class="head">相关推荐</span>
            </div>
            <div class="datas">
                <ul id="relateResource" class="relate">
                </ul>
            </div>
        </div>

    </div>
    <div class="pRight">
        <div class="data_title froms">
            <div class="from">
                来源：<span th:text="${article.remark}"></span>
            </div>
            <div class="look">
                <ul>
                    <li>
                        <b class="li_name">浏览</b>
                        <b th:text="${article.articleView}"></b>
                    </li>
                    <li>
                        <b class="li_name">下载</b>
                        <b th:text="${article.total}"></b>
                    </li>
                    <li>
                        <b class="li_name">积分</b>
                        <b th:text="${article.articlePoints}"></b>
                    </li>
                </ul>
            </div>
        </div>
        <div class="data_list">
            <div class="data_list_title">
                <i class="layui-icon layui-icon-fire"></i>
                <span class="head">精品资源</span>
            </div>
            <div class="datas">
                <ul>
                    <li th:each="hotArticle:${hotArticleList}">
                        <a target="_blank" th:href="'/article/detail/'+${hotArticle.articleId}" th:title="${hotArticle.articleName}"
                           th:text="${#strings.length(hotArticle.articleName)>20} ? ${#strings.substring(hotArticle.articleName,0,21)} : ${hotArticle.articleName}"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>


<!-- 友情链接 -->
<div class="yqlj nav">
    <h3 class="tip">友情链接</h3>
    <div class="friendBox">
            <span th:each="link:${allLinkList}">
            <a target="_blank" th:href="${link.linkUrl}" th:title="${link.linkName}">
                <span th:text="${link.linkName}"></span>
            </a>
        </span>
    </div>
</div>
<!-- 版权声明 -->
<div class="bqsm">
    <div class="sInfo">
        <a href="">Powered by <a href="/"><span th:text="${@config.getKey('site.name')}"></span></a></a>
        <a href="/tomzPage">免责申明</a>
        <a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=admin@qqzsh.top" class="qqjb" style="color: #f40;">侵权举报</a>
        <a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=admin@qqzsh.top" style="border-color: transparent;">广告合作</a>
    </div>
    <div class="sInfo">
        <span>资源总数 : <span th:text="${articleNums}"></span></span>
        <span>用户总数 ：<span th:text="${userNum}"></span></span>
        <span>下载量 ：<span th:text="${downloadNums}"></span>
    </div>
    <div class="sInfo" style="border-color: transparent;">
        Copyright © <span th:text="${@config.getKey('site.copyrightyear')}"/> <a th:href="${@config.getKey('site.url')}"><span th:text="${@config.getKey('site.url')}"></span></a> 版权所有
    </div>
    <div class="sInfo">
        <a href="http://www.beian.miit.gov.cn" target="_blank" style="border-color: transparent;"><span th:text="${@config.getKey('site.record')}"></span></a>
    </div>
</div>

<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.js}" type="text/javascript"></script>
<script th:src="@{/js/common.js}" type="text/javascript"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    layui.use(['element', 'laypage', 'form'], function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var $ = layui.jquery; // 使用jquery
        var laypage = layui.laypage;
        $("#article").addClass("active");

        //调用分页
        laypage.render({
            elem: 'articlePage'
            , limit: 6
            , count: [[${commentCount}]]
            , jump: function (obj) {
                $("#commentList").empty();
                $.post("/comment/list", {"commentArticleId": [[${article.articleId}]], "page": obj.curr}, function (result) {
                    var rows = result;
                    if (rows.length == 0) {
                        $("#commentList").html("<p align='center'>暂无评论</p>");
                    }
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows[i];
                        var show = row.user.avatar == '';
                        var imgs = "";
                        if (show){
                            imgs = "/img/profile.jpg";
                        }else {
                            imgs = row.user.avatar;
                        }
                        $("#commentList").append("<div class='comment'>" +
                            "<div class='left_img'>" +
                            "<img src='"+imgs+"' class='layui-nav-img'/>" +
                            "</div>" +
                            "<div class='right'>" +
                            "<dt class='top'>" +
                            row.user.loginName +
                            "<span class='time'>" + row.commentDate + "</span>" +
                            "</dt>" +
                            "<dd class='bottom'>" + row.commentContent + "</dd>" +
                            "</div>" +
                            "</div>");
                    }
                }, "json");
            }
        });

        // 相关资源加载
        $.post("/article/loadRelatedResources", {"q": [[${article.articleName}]]}, function (result) {
            var rows = result;
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                var subName;
                if (row.articleName.length > 30) {
                    subName = row.articleName.substring(0, 30);
                } else {
                    subName = row.articleName;
                }
                $("#relateResource").append("<li>" +
                    "<a target='_blank' href='/article/detail/" + row.articleId + "' title='" + row.articleName + "'>" + subName + "</a>" +
                    "</li>");
            }
        }, "json");

    });

    function vipDownload() {
        // 判断是否登录
        if ([[${session.currentUser}]] == null) {
            layer.msg("登录后才能下载资源！");
            return;
        }

        $.post("/user/isVip", {}, function (result) {
            if (result) {

                // 判断是否下载过
                // 添加记录
                $.post("/userDownload/exist", {"articleId": [[${article.articleId}]]}, function (result) {
                    if (result) { // 下载过
                        layer.confirm('该资您已经下载过,您确定要下载这个资源吗？', {
                            title: "下载提示"
                            , btn: ['确定', '取消'] //按钮
                        }, function () {
                            layer.closeAll('dialog');
                            layer.open({
                                type: 2,
                                title: '资源下载页面',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['550px', '450'],
                                content: '/article/toVipDownLoadPage/[[${article.articleId}]]' //iframe的url
                            });
                        }, function () {

                        });
                    } else {  // 未下载过
                        layer.confirm('您确定要下载这个资源吗？', {
                            title: "下载提示"
                            , btn: ['确定', '取消'] //按钮
                        }, function () {
                            layer.closeAll('dialog');
                            layer.open({
                                type: 2,
                                title: '资源下载页面',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['550px', '450'],
                                content: '/article/toVipDownLoadPage/[[${article.articleId}]]' //iframe的url
                            });

                        }, function () {

                        });


                    }
                }, "json");


            } else {
                layer.msg("很抱歉,您不是VIP用户，不能用此通道！");
            }
        }, "json");
    }

    function submitData() {
        // 登录后才能评论
        if ([[${session.currentUser}]] == null) {
            layer.msg("登录后才能评论！");
            return;
        }
        // 添加记录
        var content = $("#commentContent").val();
        if (content == "") {
            layer.msg("请输入评论信息！");
            return;
        }
        $.post("/comment/save", {"commentArticleId": [[${article.articleId}]], "commentContent": content}, function (result) {
            if (result.success) {
                $("#commentContent").val("");
                layer.msg("评论成功，稍后显示！");
            }
        }, "json");
    }

    function download() {
        // 判断是否登录
        if ([[${session.currentUser}]] == null) {
            layer.msg("登录后才能下载资源！");
            return;
        }

        // 判断是否下载过
        // 添加记录
        $.post("/userDownload/exist", {"articleId": [[${article.articleId}]]}, function (result) {
            if (result) { // 下载过
                layer.confirm('该资您已经下载过，再下载不需要扣除积分,您确定要下载这个资源吗？', {
                    title: "下载提示"
                    , btn: ['确定', '取消'] //按钮
                }, function () {
                    layer.closeAll('dialog');
                    layer.open({
                        type: 2,
                        title: '资源下载页面',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['550px', '450'],
                        content: '/article/toDownLoadPage/[[${article.articleId}]]' //iframe的url
                    });
                }, function () {

                });
            } else {  // 未下载过
                // 添加记录
                $.post("/userDownload/enough", {"points": [[${article.articlePoints}]]}, function (result) {
                    if (result) {  // 积分足够
                        layer.confirm('该资源下载需要 <font color="red">[[${article.articlePoints}]]</font> 积分,您确定要下载这个资源吗？', {
                            title: "下载提示"
                            , btn: ['确定', '取消'] //按钮
                        }, function () {
                            layer.closeAll('dialog');
                            layer.open({
                                type: 2,
                                title: '资源下载页面',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['550px', '450'],
                                content: '/article/toDownLoadPage/[[${article.articleId}]]' //iframe的url
                            });

                        }, function () {

                        });
                    } else { // 积分不够
                        layer.msg("很抱歉，您的积分不够，不能下载该资源！");
                        return;
                    }
                }, "json");
            }
        }, "json");


    }

    //更新查看次数
    $(document).ready(function () {
        $.post("/updateView", {"articleId": [[${article.articleId}]]}, function (result) {
        });
    });

    /*]]>*/


</script>
</body>
</html>